<template>
	<view  class="flex-row flex-row-wrap">
		<view class="img-dom" v-for="(item,index) in imageList" :key="index">
			<image class="img-item" :src="item.url" mode="scaleToFill" @click="imgView(item)"></image>
			<view class="img-bnt flex-row">
				<view v-show="editShow" class="img-bnt-item" @click="imgDelete(item)">
					<uni-icons type="trash-filled" size="18" color="#fff"></uni-icons>
				</view>
			</view>
		</view>
		<view v-if="imageList.length < maxNumber && editShow" class="img-add" @click="imgSelect">
			<uni-icons type="plusempty" size="30" color="#f1f1f1"></uni-icons>
		</view>
		<view v-if="imageList.length == 0 && !editShow" class="img-no">
			暂无图片
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { getFile } from "@/api/public"
	const emit = defineEmits(["uploadImg", 'imgDelete'])
	const props = defineProps({
		imageList: {
			type: Array,
			default: function () {
				return [];
			}
		},
		maxNumber: {
			type: Number,
			default: 1
		},
		editShow: {
			type: Boolean,
			default: false
		}
	})
	/**
	 * 选择图片时
	 * @param event
	 */
	const imgSelect = () => {
		// #ifdef H5 || APP-PLUS 
		uni.chooseImage({
			count: 1,
			sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album'], //从相册选择
			success: function (res) {
				let list = res.tempFiles || []
				let tempFiles = list.filter((item) => item.size <= 1024 * 1024 * 2) // 过滤掉size大于2mb的数据
				tempFiles.length < list.length ? uni.showToast({ title: '图片大小不能超过2MB！请重新选择图片', icon: 'none', duration: 3000 }) : ''
				if (tempFiles.length != 0) {
					let filePath = tempFiles[0].path
					emit('uploadImg', filePath)
				}
			}
		});
		// #endif
		// #ifdef MP-WEIXIN 
		uni.chooseMedia({
			count: 1,
			mediaType: ['image'],
			sourceType: ['album', 'camera'],
			maxDuration: 30,
			camera: 'back',
			success(res) {
				let list = res.tempFiles || []
				let tempFiles = list.filter((item) => item.size <= 1024 * 1024 * 2) // 过滤掉size大于2mb的数据
				tempFiles.length < list.length ? uni.showToast({ title: '图片大小不能超过2MB！请重新选择图片', icon: 'none', duration: 3000 }) : ''
				if (tempFiles.length != 0) {
					let filePath =  tempFiles[0].tempFilePath
					emit('uploadImg', filePath)
				}
			}
		})
		// #endif
	}
	/**
	 * 删除图片时
	 * @param event
	 */
	const imgDelete = (item) => {
		uni.showModal({
			title: '操作提示',
			content: '是否确认删除此文件' ,
			success: function (res) {
				if (res.confirm) {
					emit('imgDelete', item.id)
				} else if (res.cancel) {

				}
			}
		});
	}

	function imgView(item) {
		let downloadPath = item.downloadPath
		let suffix = item.suffix
		getFile({ fileName: downloadPath, suffix }).then(res => {
			let urls = [res.data]
			uni.previewImage({
				urls: urls
			});
		})
	}
</script>

<style lang="scss" scoped>
	.img-dom {
		position: relative;
		margin: 0 10px 10px 0;
		width: calc(33% - 10px);

		.img-item {
			width: 100%;
			height: 200rpx;
			border-radius: 6rpx;
		}

		.img-bnt {
			position: absolute;
			width: 100%;
			bottom: 6px;
			border-radius: 0 0 6rpx 6rpx;
			background: rgba(0, 0, 0, 0.3);
			line-height: 16px;

			.img-bnt-item {
				padding: 3px 0;
				flex: 1;
				text-align: center;
			}
		}
	}

	.img-add {
		width: 100px;
		margin: 0 10px 10px 0;
		height: 100px;
		border-radius: 6rpx;
		border: 1px solid #eee;
		text-align: center;
		line-height: 100px;
	}

	.img-no {
		flex: 1;
		font-size: 20rpx;
		text-align: center;
		color: #aaa;
	}
</style>